<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v2.0.0/minemap.css">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <script src="//minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
    <script src="//minedata.cn/minemapapi/v2.0.0/plugins/turf/turf.min.js"></script>
    <script src="//minedata.cn/minemapapi/v2.0.0/plugins/template/template.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        #m-btn {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="map">
</div>
<script>
    //var route = [[116.4066765, 39.9079326], [116.418049, 39.9081795], [116.4177486, 39.9155695], [116.4111611, 39.9154872], [116.4114186, 39.9105497]];

    /**
     * 生成动态粒子图层数据
     * @param data 数据，样例  [[116.38,49.9,3],[116.38,49.9,3]]
     * @param segDistance 每小段长度,默认值为10
     * @param speed 粒子速度，可选值为 1，2，3，4，默认为1，速度最快
     * @returns {{type: string, features: Array}}
     */
    //var mySpriteGeojson = minemap.Template.util.pointArrayToSpriteGeoJson(route);
    //var mySpriteGeojson = minemap.Template.util.pointArrayToSpriteGeoJson(route,10,2);


    minemap.domainUrl = '//minedata.cn';
   minemap.dataDomainUrl = '//datahive.minedata.cn';
   minemap.spriteUrl = '//minedata.cn/minemapapi/v2.0.0/sprite/sprite';
   minemap.serviceUrl = '//minedata.cn/service';
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 2365;
    var map = new minemap.Map({
        container: 'map',
        style: "//minedata.cn/service/solu/style/id/2365",
        center: [117.489405,39.006015],
        zoom: 4,
        pitch: 0
    });
    map.repaint = true;


    map.on('load', function () {
        map.addSource('particle-source', {
            type: "vector",
            tiles: ["//localhost:8004/data/pbf_particle/{z}/{x}/{y}?name=upload_1537243142666&speed=1&range=100"]
            //type: 'vector', //minemapdata:
            //tiles: ['//36.111.84.170:8004/data/pbf_particle/{z}/{x}/{y}?name=lizi2&speed=1']
        })
        map.addLayer({
            "id": 'particleLayer',
            "type": "sprite",
            "source": 'particle-source',
            "source-layer": 'position',
            layout: {
              "sprite-cap": "round",
              "visibility": "visible",
              "sprite-join": "round"
            },
            //maxzoom: 17,
            //minzoom: 3,
            "paint": {
                "sprite-color": "#00000C",
                "sprite-width": 2,
                "sprite-speed-factor": 1
            }
        });
    });

</script>
</body>
</html>
